<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>

  *{
   margin:0;
   padding:0
  }

  </style>
</head>

<body>
  <div id ="box">
    <img src="a.jpg" alt="" class="img">  
  </div>
  <img src="m1.jpg" alt="" title="" class="img1">
</body>

  <script>
    //节点是个对象
    //对象属性的操作 可以使用对象属性的方式 操作dom的对象的属性
    var obj ={};
    obj.age='14';
    // console.log(obj.age)
    // console.log(obj['age'])
    //给节点 新增任何属性 可以查询 可以重新赋值
    var box = document.getElementById('box');
    box.age ='14';
    console.log(box.age);
    var img = document.querySelector('.img');
    console.log(img.src);//通过对象的方式获取值
    img.src=''//通过对象的方式赋值
    //对象属性的删除
    delete box.age;
    console.log(box.age);

    //通过dom提供的这个方法 进行dom对象属性的增删改查
    // box.getAttribute() //取值
    // box.setAttribute() //设置 只能设置 元素固有属性 不能给他新增
    // box.removeAttribute()//删除
    var img1 = document.getElementsByClassName('img1'); 
    console.log(img1[0].getAttribute('src')); //如果获取的是路径 相对路径
    img1[0].setAttribute('alt','通过js设置的alt');//设置节点元素的属性
    // img1[0].setAttribute('age','14'); 无法进行新增
    // console.dir(img1[0])
    img1[0].removeAttribute('alt');//可以通过 removeAttribute的方法去删除元素固有的属性
    //建议  你用对象方式 操作的dom对象 就要用对象的方式去操作 一一对应

</script>
</html>